<!--
 * @Descripttion: 品牌管理
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-11-24 08:59
 * @LastEditors: a12
 * @LastEditTime: 2020-11-24 08:59
-->
<template>
  <div>
    <div class="control-box">
      <!-- control 操作区 START -->
      <e-control :search-form-options="formOptions"
                 :search-label-width="searchLabelWidth"
				 :search-insert-showh="true"
                 @on-search="searchControlHandle"
                 @on-refresh="refreshControlHandle"
				 @on-insert="insertControlHandle"
                 @change-height="changeControlHeight"></e-control>
      <!-- control 操作区 END -->
    </div>
    <e-table :data="reconList"
             :columns="columns"
             stripe
             border
             :max-height="tableMaxHeight"
             style="width: 100%"
             :current="pageData.pageNum"
             :total="pageData.total"
             @page-size-change="changePageSize"
             @page-current-change="changePageCurrent">
      <template slot-scope="{scope}" slot="recordTime">
        <span>{{recordTime(scope.row)}}</span>
      </template>
      <template slot-scope="{scope}" slot="v">
        <span>{{scope.row.v === '1' ? '启用' : '停用'}}</span>
      </template>
      <template slot-scope="{scope}"
                slot="operation">
        <el-tooltip v-if="scope.row.v === '0'"
                    content="启用"
                    placement="top">
          <el-button @click="editVEvent(scope.row)"
                     type="primary"
                     size="mini"
                     icon="el-icon-open"
                     plain></el-button>
        </el-tooltip>
        <el-tooltip v-if="scope.row.v === '1'"
                    content="停用"
                    placement="top">
          <el-button @click="editVEvent(scope.row)"
                     type="danger"
                     size="mini"
                     icon="el-icon-turn-off"
                     plain></el-button>
        </el-tooltip>
      </template>
    </e-table>
  </div>
</template>

<script>
import {queryList,editV} from '@/api/admin.api'
import eControl from '@/components/e-control'
import eTable from '@/components/e-table'
import { formOptions } from './control'
import { columns } from './columns'
import moment from "moment"
export default {
  name: 'brand-manager',
  components: {
    eControl,
    eTable
  },
  filters: {
    formeTime(val){
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
    }
  },
  data() {
    return {
      formOptions,
      columns,
      searchLabelWidth: '100px',
      // 控制区高度
      controlHeight: 0,
      searchFormData:{},
      reconList:[],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      }
    }
  },
  watch: {},
  computed: {
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight
    },
    // 记录时间
    recordTime () {
      return function(row) {
        return row.updateTime ? this.$options.filters.formeTime(row.updateTime) : this.$options.filters.formeTime(row.createTime)
      }
    }
  },
  created() {
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
	insertControlHandle () {
		console.log(123)
	},
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight (height) {
      this.controlHeight = height
    },
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize (size) {
      this.pageData.pageSize = size
      this.getTableData()
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent (current) {
      this.pageData.pageNum = current
      this.getTableData()
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.pageData.pageNum = 1
      this.getTableData()
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    getTableData () {
      const { pageNum, pageSize } = this.pageData
      queryList ({...this.searchFormData,size: pageSize, current: pageNum}).then(res=>{
        this.reconList = res.records
        this.pageData.total = res.total
      })
    },
    /**
     * @description 启用/停用品牌
     * @author 穆宏宇
     * @date 2020-11-24 09:44:08
     * @param
     * @return
     * */
    editVEvent (row) {
      editV({id:row.id,v:Number(row.v) === 1 ? 0 : 1}).then(()=>{
        this.$message({
          message: '设置成功',
          type: 'success'
        })
        this.getTableData()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
